<template>
    <div class="container">
      <!-- 导航 -->
      <div class="nav">
        <h1>起点中文网</h1>
        <div class="sex">
          <router-link tag="p" to="/boy">男生</router-link>
          <p>女生</p>
        </div>
        <div class="img">
          <router-link
            tag="span"
            to="/userinfo"
            class="iconfont icon-weidenglu-touxiang"
          ></router-link>
          <router-link
            tag="span"
            to="/bookshif"
            class="iconfont icon-shujia"
          ></router-link>
        </div>
      </div>
  
      <!-- 轮播图 -->
      <div class="bannerbox">
        <div class="swiper">
          <van-swipe
            class="my-swipe"
            :autoplay="3000"
            indicator-color="white"
            @change="onChange"
          >
            <router-link
              tag="van-swipe-item"
              :to="'/details?id=' + item.id"
              v-for="item in bannerbox_img"
              :key="item.id"
            >
              <img :src="item.img" alt="" />
            </router-link>
            <template #indicator>
              <div class="custom-indicator">
                <ul>
                  <li
                    v-for="num in bannerbox_img.length"
                    :key="num"
                    :class="{ con: indexSwiper == num - 1 }"
                  ></li>
                </ul>
              </div>
            </template>
          </van-swipe>
        </div>
      </div>
  
      <!-- 搜索 -->
      <router-link tag="div" to="/search" class="global_search">
        <div class="search_box">
          <span class="iconfont icon-sousuo"></span>
          <span>女中强者</span>
        </div>
      </router-link>
  
      <!-- 跳转页面 -->
      <div class="home-nav">
        <ul>
          <router-link
            tag="li"
            v-for="item in home_nav_lists"
            :key="item.id"
            :to="'/page' + item.id"
          >
            <a>
              <img :src="item.img" alt="" />
              <p>{{ item.title }}</p>
            </a>
          </router-link>
        </ul>
      </div>
  
      <!-- 新书强推 -->
      <div class="home-btn-line-x">
        <p>新书强推</p>
        <p>三江·网文新风</p>
      </div>
  
      <!-- 畅销精选 -->
      <div class="module">
        <div class="module-header">
          <div class="left">畅销精选</div>
          <div class="right">
            更多 <span class="iconfont icon-dayuhao"></span>
          </div>
        </div>
        <router-link
          tag="div"
          :to="'/details?id=' + item.id"
          class="book"
          v-for="item in book_lists"
          :key="item.id"
        >
          <div class="img">
            <img :src="item.img" alt="" />
          </div>
          <div class="text">
            <h4>{{ item.name }}</h4>
            <p>
              {{ item.brief }}
            </p>
            <div class="bottom">
              <div class="text_left">{{ item.type }} · {{ item.number }}</div>
              <div class="text_right">
                <p>{{ item.label_one }}</p>
                <p>{{ item.label_two }}</p>
              </div>
            </div>
          </div>
        </router-link>
      </div>
  
      <!-- 猜你喜欢 -->
      <div class="module">
        <div class="module-header">
          <div class="left">
            猜你喜欢
            <span>根据你的阅读口味智能推荐</span>
          </div>
        </div>
        <router-link
          tag="div"
          :to="'/details?id=' + item.id"
          class="module_content"
          v-for="item in module_content_lists"
          :key="item.id"
        >
          <h1>{{ item.title }}</h1>
          <div class="book">
            <div class="img">
              <img :src="item.img" alt="" />
            </div>
            <div class="text">
              <h4>{{ item.name }}</h4>
              <p>
                {{ item.brief }}
              </p>
              <div class="bottom">
                <div class="text_left">{{ item.type }} · {{ item.number }}</div>
              </div>
            </div>
          </div>
        </router-link>
        <div class="move">
          <div class="img">
            <span class="iconfont icon-xuanzhuan"></span>
          </div>
          <p>换一批</p>
        </div>
      </div>
  
      <!-- 限时免费 -->
      <div class="module">
        <div class="module-header">
          <div class="left">
            限时免费
            <span class="time">01</span>: <span class="time">23</span>:
            <span class="time">25</span>:
            <span class="time">45</span>
          </div>
          <div class="right">
            更多 <span class="iconfont icon-dayuhao"></span>
          </div>
        </div>
        <div class="list">
          <div class="content">
            <van-swipe :loop="false" :width="82" :show-indicators="false">
              <router-link
                tag="van-swipe-item"
                :to="'/details?id=' + item.id"
                v-for="item in limit_book_lists"
                :key="item.id"
              >
                <div class="item">
                  <div class="img">
                    <img :src="item.img" alt="" />
                    <em>限免</em>
                  </div>
                  <div class="text">
                    <p>{{ item.name }}</p>
                    <p>{{ item.author }}</p>
                  </div>
                </div>
              </router-link>
            </van-swipe>
          </div>
        </div>
      </div>
  
      <!-- 排行榜 -->
      <div class="module ranking module_ranking">
        <div class="module-header">
          <div class="left">排行榜</div>
          <div class="right">
            更多 <span class="iconfont icon-dayuhao"></span>
          </div>
        </div>
        <div class="moduleTab">
          <ul>
            <li>畅销榜</li>
            <li>风云榜</li>
            <li>签约榜</li>
            <li>推荐榜</li>
          </ul>
        </div>
        <div class="list">
          <div class="content">
            <van-swipe :loop="false" :width="82" :show-indicators="false">
              <router-link
                tag="van-swipe-item"
                :to="'/details?id=' + item.id"
                v-for="(item, index) in ranking_lists"
                :key="item.id"
              >
                <div class="item">
                  <div class="img">
                    <img :src="item.img" alt="" />
                    <em>top{{ index + 1 }}</em>
                  </div>
                  <div class="text">
                    <p>{{ item.name }}</p>
                    <p>{{ item.author }}</p>
                  </div>
                </div>
              </router-link>
            </van-swipe>
          </div>
        </div>
      </div>
  
      <!-- 分类推荐 -->
      <div class="module ranking sort">
        <div class="module-header">
          <div class="left">
            分类推荐
            <span>频道主编推荐</span>
          </div>
          <div class="right">
            更多 <span class="iconfont icon-dayuhao"></span>
          </div>
        </div>
        <div class="moduleTab">
          <ul>
            <li class="con">玄幻奇幻</li>
            <li>武侠仙侠</li>
            <li>都市职场</li>
          </ul>
        </div>
        <div class="list">
          <div class="content">
            <van-swipe :loop="false" :width="82" :show-indicators="false">
              <router-link
                tag="van-swipe-item"
                :to="'/details?id=' + item.id"
                v-for="item in sort_lists"
                :key="item.id"
              >
                <div class="item">
                  <div class="img">
                    <img :src="item.img" alt="" />
                  </div>
                  <div class="text">
                    <p>{{ item.name }}</p>
                    <p>{{ item.author }}</p>
                  </div>
                </div>
              </router-link>
            </van-swipe>
          </div>
        </div>
        <div class="moduleTab change">
          <ul>
            <li class="con">历史军事</li>
            <li>游戏体育</li>
            <li>科幻悬疑</li>
          </ul>
        </div>
        <div class="list">
          <div class="content">
            <van-swipe :loop="false" :width="82" :show-indicators="false">
              <router-link
                tag="van-swipe-item"
                :to="'/details?id=' + item.id"
                v-for="item in limit_book_lists"
                :key="item.id"
              >
                <div class="item">
                  <div class="img">
                    <img :src="item.img" alt="" />
                  </div>
                  <div class="text">
                    <p>{{ item.name }}</p>
                    <p>{{ item.author }}</p>
                  </div>
                </div>
              </router-link>
            </van-swipe>
          </div>
        </div>
      </div>
  
      <!-- 照片 -->
      <div class="home-pure-ad">
        <img
          src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/4ebf0592109ae5c61d5cfd90f70b99ff.jpg"
          alt=""
        />
      </div>
  
      <!-- 轻小说 -->
      <div class="module ranking sort">
        <div class="module-header">
          <div class="left">轻小说</div>
          <div class="right">
            更多 <span class="iconfont icon-dayuhao"></span>
          </div>
        </div>
        <div class="list">
          <div class="content">
            <van-swipe :loop="false" :width="82" :show-indicators="false">
              <router-link
                tag="van-swipe-item"
                :to="'/details?id=' + item.id"
                v-for="item in limit_book_lists"
                :key="item.id"
              >
                <div class="item">
                  <div class="img">
                    <img :src="item.img" alt="" />
                  </div>
                  <div class="text">
                    <p>{{ item.name }}</p>
                    <p>{{ item.author }}</p>
                  </div>
                </div>
              </router-link>
            </van-swipe>
          </div>
        </div>
      </div>
  
      <!-- 精选专题 -->
      <div class="module selected">
        <div class="module-header">
          <div class="left">精选专题</div>
        </div>
        <div class="img">
          <img
            src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/6fa21f1905dd0ed8ddad52102d37e28e.jpeg"
            alt=""
          />
          <img
            src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/8ec38ff3b3c2baf9a4fa520faa4a3543.jpg"
            alt=""
          />
        </div>
        <div class="img">
          <img
            src="https://qidian.qpic.cn/qidian_common/349573/196e3d3bec0baee4ea0dcb40ddce2bb3/0"
            alt=""
          />
          <img
            src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/efd00da9241b72d53d5e360583571e0d.jpg"
            alt=""
          />
        </div>
        <div class="text" v-show="flag">
          <p>登录后获得更多特色功能·</p>
          <router-link tag="p" to="/userinfo">立即登录</router-link>
        </div>
      </div>
  
      <!-- 底部 -->
      <div class="footer-link">
        <div class="top">
          <p>QQ阅读</p>
          <p>红袖添香</p>
        </div>
        <div class="among">
          <p>客户端</p>
          <p>触屏版</p>
          <p>帮助与客服</p>
          <p>搜索</p>
        </div>
        <div class="footer-copy">
          <p>网站备案/许可证号：沪B2-20080046-1</p>
          <p>互联网宗教信息服务许可证 编号：沪（2022）0000022</p>
          <p>沪B2-20080046-1</p>
        </div>
      </div>
      <!-- 固定 -->
      <div class="fixed">
        <div class="bottom-left">书城精选</div>
        <div class="bottom-middle">
          <img
            src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/510a36b35ce8c3265e6f909f4ab52c2d.png"
            alt=""
          />
        </div>
        <div class="bottom-right">下载起点读书</div>
      </div>
  
      <!-- 最近阅读 -->
      <van-cell @click="showPopup"
        ><div class="fixed_two">最近阅读</div></van-cell
      >
      <van-popup
        v-model="show"
        position="right"
        :style="{ height: '100%', width: '330px', color: 'black' }"
        >
        <div class="recent">
          <div class="title">
            <p>最近阅读</p>
          </div>
          <router-link tag="div" :to="'/details?id=' + item.id" class="recent_book" v-for="item in recent_book" :key="item.id">
            <div class="book-title">
              <p>{{item.name}}</p>
              <p>继续阅读<span class="iconfont icon-qianjin"></span></p>
            </div>
            <div class="book-meta">
              {{item.meta}}
            </div>
            <div class="book_time">
              {{item.time}}
            </div>
          </router-link>
        </div>
        </van-popup
      >
    </div>
  </template>
  
  <script>
  import { getRankingData } from "../api/home.js";
  export default {
    data() {
      return {
        indexSwiper: 0,
        bannerbox_img: [
          {
            id: 1207,
            img: "https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/4c5051884739f8ea5846761780d54424.jpg",
          },
          {
            id: 1208,
            img: "https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/66b4fd4ed740fff05ca57880055c9d0b.jpg",
          },
          {
            id: 1209,
            img: "https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/72e9033a7c3d55b24c6e0f6e20ade5bf.jpg",
          },
          {
            id: 1210,
            img: "https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/e3c61fd0025290e4d5bcce423e11f9a6.jpg",
          },
        ],
        home_nav_lists: [
          {
            id: 1,
            img: "https://qidian.gtimg.com/qdm/img/sort.3c6e2.png",
            title: "分类",
          },
          {
            id: 2,
            img: "https://qidian.gtimg.com/qdm/img/rank.7f3ea.png",
            title: "排行榜",
          },
          {
            id: 3,
            img: "https://qidian.gtimg.com/qdm/img/free.80453.png",
            title: "免费",
          },
          {
            id: 4,
            img: "https://qidian.gtimg.com/qdm/img/end.08eac.png",
            title: "完本",
          },
          {
            id: 5,
            img: "https://qidian.gtimg.com/qdm/img/god.f39ac.png",
            title: "大神",
          },
        ],
        book_lists: [
          {
            id: 1211,
            img: "https://bookcover.yuewen.com/qdbimg/349573/1034356186/150",
            name: "无限修仙模拟：开局吊打极品宗门",
            brief: "穿越到了修真世界，楚媚儿悲剧了在这个强者至上的世界，她无灵根，无天赋，为奴为仆，还跟了个性情暴虐的千金小姐，受尽欺辱等等！她居然拥有一个人生模拟系统充值天材地宝就能模拟一次人生，还能",
            type: "玄幻言情 ",
            number: "52万字",
            label_one: "女强",
            label_two: "穿越",
          },
          {
            id: 1212,
            img: "	https://bookcover.yuewen.com/qdbimg/349573/1034584250/150",
            name: "年代娇宠，娇软美人被糙汉宠野了",
            brief:
              "周玄重生成了大夏仙朝天师府鉴魔司里的一名鉴魔役，开局获得六道宝鉴，可以通过清算妖邪死后不散的因果，不断获取各种奖励。洗髓宝术“紫气东来”、太一经、元屠阿鼻、涅槃道果、千年蟠桃……恰逢三界动乱，妖魔",
            type: "仙侠",
            number: "113万字",
            label_one: "签到",
            label_two: "杀伐果断",
          },
          {
            id: 1213,
            img: "https://bookcover.yuewen.com/qdbimg/349573/1034894174/150",
            name: "大明1805",
            brief:
              "大明泰平三十四年元月五日，西历公元1805年2月4日，今日立春，天气阴转晴。拿破仑就任法、普、露三国亚洲陆军部队统帅，剑指伊犁河谷》。《纳尔逊率领英、法两国联合舰队抵达印度洋，威胁马六甲海峡》。",
            type: "历史",
            number: "40万字",
            label_one: "架空历史",
            label_two: "明朝",
          },
        ],
        module_content_lists: [
          {
            id: 1214,
            name: "我用闲书成圣人",
            title: "你可能感兴趣的好书",
            img: "https://bookcover.yuewen.com/qdbimg/349573/1028463573/150",
            brief: "致【玩家】：这是生命的奥秘，是万物的征途。",
            type: "仙侠",
            number: "313万字",
          },
          {
            id: 1215,
            name: "黜龙",
            title: "为你精心挑选的优质作品",
            img: "https://bookcover.yuewen.com/qdbimg/349573/1031516087/150",
            brief:
              "此方天地有龙。龙形百态，不一而足，或游于江海，或翔于高山，或藏于九幽，或腾于云间。",
            type: "历史",
            number: "156万字",
          },
          {
            id: 1216,
            name: "序列玩家",
            title: "万千书友喜欢的精品佳作",
            img: "https://bookcover.yuewen.com/qdbimg/349573/1016407584/150",
            brief: "致【玩家】：这是生命的奥秘，是万物的征途。",
            type: "悬疑",
            number: "291万字",
          },
        ],
        limit_book_lists: [
          {
            id: 1217,
            img: "https://bookcover.yuewen.com/qdbimg/349573/1034390229/150",
            name: "美剧人生从豪斯医生开始",
            author: "阿拉米格",
          },
          {
            id: 1218,
            img: "https://bookcover.yuewen.com/qdbimg/349573/1033055770/150",
            name: "精灵：我真打不过宝可梦啊",
            author: "乘风览月",
          },
          {
            id: 1219,
            img: "https://bookcover.yuewen.com/qdbimg/349573/1033886237/150",
            name: "开局获得时间禁止，进入聊天群",
            author: "五爪的鱼",
          },
          {
            id: 1220,
            img: "https://bookcover.yuewen.com/qdbimg/349573/1033826716/150",
            name: "重生东京，开错外挂",
            author: "前有绝景",
          },
          {
            id: 1221,
            img: "https://bookcover.yuewen.com/qdbimg/349573/1033343871/150",
            name: "亿人聊天群",
            author: "超人坐家",
          },
          {
            id: 1222,
            img: "https://bookcover.yuewen.com/qdbimg/349573/1034019729/150",
            name: "新吕布战纪. 限时免费",
            author: "强中更有强",
          },
          {
            id: 1223,
            img: "https://bookcover.yuewen.com/qdbimg/349573/1033343871/150",
            name: "亿人聊天群",
            author: "超人坐家",
          },
        ],
        ranking_lists: null,
        account_num: null,
        flag: true,
        sort_lists: null,
        show: false,
        recent_book:null,
      };
    },
    methods: {
      onChange(index) {
        this.indexSwiper = index;
      },
      account() {
        this.account_num = window.localStorage.getItem("token");
        if (this.account_num) {
          this.flag = false;
        } else {
          this.flag = true;
        }
      },
      showPopup() {
        this.show = true;
      },
    },
    created() {
      this.account();
      getRankingData().then((data) => {
        console.log(data.recent_book);
        this.ranking_lists = data.data;
        this.sort_lists = data.sort;
        this.recent_book = data.recent_book;
      });
    },
  };
  </script>
  
  <style lang="scss" scoped>
  // 最近阅读
  .van-popup {
    .recent {
      .title {
        text-align: center;
        p {
          padding: 15px;
        }
      }
      .recent_book {
        padding: 15px;
        padding-left: 0;
        margin-left: 15px;
        border-bottom: 1px solid #cfcfd0;
        .book-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          p {
            &:nth-child(1) {
              font-weight: 600;
              font-size: 18px;
            }
            &:nth-child(2) {
              font-size: 14px;
              color: #969ba3;
            }
          }
  
        }
        .book-meta,.book_time {
          color: #969ba3;
          font-size: 14px;
          padding: 2px 0;
        }
      }
    }
  }
  
  
  // 轻小说
  
  // 照片
  .home-pure-ad {
    padding: 0 15px 12px 15px;
    img {
      width: 100%;
    }
  }
  
  // 分类推荐
  .ranking {
    .item {
      .img {
        em {
          background-color: #ed424b;
          color: #fff;
        }
      }
    }
  }
  
  .moduleTab {
    margin-bottom: 12px;
    ul {
      display: flex;
      border: 1px solid #ed424b;
      border-radius: 4px;
      li {
        width: 33.3%;
        text-align: center;
        color: #ed424b;
        height: 27px;
        line-height: 27px;
        font-size: 14px;
        &.con {
          background-color: #ed424b;
          color: #fff;
        }
      }
    }
  }
  .moduleTab ul li:nth-child(2),
  .moduleTab ul li:nth-child(3) {
    border-right: 1px solid #ed424b;
  }
  
  // 限时免费
  .module {
    .module-header {
      align-items: center;
      .left {
        & > .time {
          margin-left: 0;
          border-radius: 3px;
          background-color: #33373d;
          color: #ffffff;
          &:nth-child(1) {
            background-color: #ed424b;
            color: #faf3ff;
          }
        }
      }
    }
    .list {
      padding-bottom: 16px;
      .content {
        .van-swipe {
          .van-swipe-item {
            // width: 100%;
            // margin-right: 16px;
            .item {
              .img {
                width: 66px;
                height: 88px;
                position: relative;
                img {
                  width: 100%;
                  height: 100%;
                }
                em {
                  position: absolute;
                  left: 0;
                  top: 7px;
                  font-size: 10px;
                  line-height: 11px;
                  font-style: normal;
                  background-color: #4284ed;
                  color: #fff;
                  transform: rotate(-45deg);
                }
              }
              .text {
                width: 100%;
                line-height: 16px;
                font-size: 12px;
                color: #33373d;
                p {
                  &:nth-child(1) {
                    margin: 6px 0;
                    height: 32px;
                    overflow: hidden;
                  }
                  &:nth-child(2) {
                    font-size: 13px;
                    color: #969ba3;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  
  .container {
    background-color: #f6f7f9;
  }
  // 导航
  .nav {
    display: flex;
    padding: 9px 12px;
    justify-content: space-between;
    background-color: #fff;
    h1 {
      height: 26px;
      line-height: 26px;
      font-size: 18px;
      color: #ee2737;
      font-weight: bold;
    }
    .sex {
      display: flex;
      height: 24px;
      line-height: 24px;
      border: 1px solid #ed424b;
      p {
        &:nth-child(1) {
          padding: 0 12px;
          background-color: #fff;
          font-size: 12px;
          color: #ed424b;
        }
        &:nth-child(2) {
          padding: 0 12px;
          background-color: #ed424b;
          font-size: 12px;
          color: #fff;
        }
      }
    }
    .img {
      display: flex;
      justify-content: space-between;
      align-content: center;
      .iconfont {
        font-size: 22px;
      }
      span:nth-child(1) {
        margin-right: 12px;
        margin-top: 1px;
      }
    }
  }
  // 照片轮播图妖轮播图
  .bannerbox {
    background-color: #f6f7f9;
    padding: 0px 12px;
    .swiper {
      overflow: hidden;
      img {
        width: 100%;
      }
      .custom-indicator {
        width: 100%;
        position: absolute;
        left: 0px;
        bottom: 0px;
        text-align: center;
        ul {
          display: inline-block;
          margin: 0 auto;
          li {
            display: inline-block;
            width: 4px;
            height: 4px;
            margin: 4px 2px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            &.con {
              background-color: red;
            }
          }
        }
      }
    }
  }
  //搜索
  .global_search {
    background-color: #f6f7f9;
    padding: 0px 12px;
    display: flex;
    .search_box {
      display: flex;
      background-color: #fff;
      width: 100%;
      justify-content: center;
      border-radius: 4px;
      margin: 6px 0;
      span {
        height: 32px;
        line-height: 32px;
        color: #969ba3;
        font-size: 14px;
        text-indent: 0.4em;
      }
    }
  }
  // 跳转页面
  .home-nav {
    background-color: #fff;
    ul {
      display: flex;
      justify-content: space-around;
      padding: 18px 0;
      li {
        a {
          img {
            margin: 0 auto;
            width: 26px;
            height: 26px;
          }
          p {
            font-size: 12px;
            color: #33373d;
            margin-top: 9px;
          }
        }
      }
    }
  }
  
  // 新书强推
  .home-btn-line-x {
    padding: 16px;
    background-color: #f6f7f9;
    display: flex;
    justify-content: center;
    p {
      height: 27px;
      line-height: 27px;
      font-size: 14px;
      color: #ed424b;
      border: 1px solid #ed424b;
      width: 45%;
      text-align: center;
      border-radius: 13px;
      &:nth-child(1) {
        margin-right: 18px;
      }
    }
  }
  
  // 畅销精选
  .module {
    padding: 0 16px;
    margin-bottom: 11px;
    background-color: #fff;
    .book {
      display: flex;
      padding-bottom: 16px;
      border-bottom: 2px solid #f0f1f2;
      margin-top: 10px;
      img {
        width: 66px;
        height: 88px;
      }
      .text {
        margin-left: 6px;
        h4 {
          height: 22px;
          line-height: 22px;
          color: #33373d;
          font-weight: bold;
        }
        & > p {
          font-size: 14px;
          color: #969ba3;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-top: 6px;
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 4px;
          .text_left {
            display: flex;
            font-size: 14px;
            color: #969ba3;
          }
          .text_right {
            display: flex;
            color: #adadad;
            font-size: 12px;
            margin-top: 1px;
            & > p {
              height: 18px;
              line-height: 18px;
              padding: 0 4px;
              background-color: #f5f5f5;
              border-radius: 3px;
              &:nth-child(1) {
                margin-right: 4px;
              }
            }
          }
        }
      }
    }
  }
  .module-header {
    display: flex;
    justify-content: space-between;
    padding: 20px 0 10px 0;
    .left {
      font-size: 16px;
      border-left: 2px solid #ed424b;
      padding: 0 8px;
      font-weight: 500;
      color: #33373d;
      font-weight: bold;
    }
    .right {
      font-size: 14px;
      color: #969ba3;
    }
  }
  
  // 猜你喜欢
  .module {
    .module-header {
      .left {
        & > span {
          font-size: 14px;
          color: #969ba3;
          font-weight: normal;
          margin-left: 10px;
        }
      }
    }
    h1 {
      font-size: 14px;
      color: #969ba3;
      margin-top: 22px;
    }
    .move {
      display: flex;
      justify-content: center;
      padding: 19px 0 16px 0;
      .img {
        width: 16px;
        height: 16px;
        margin-top: 2px;
        span {
          color: #5790df;
        }
      }
      p {
        font-style: 14px;
        color: #5790df;
      }
    }
  }
  
  // 排行榜
  .module_ranking .item .img em {
    background-color: #ed424b;
    color: #fff;
  }
  
  .module_ranking .moduleTab {
    margin-bottom: 12px;
  }
  
  .module_ranking .moduleTab ul {
    display: flex;
    border: 1px solid #ed424b;
    border-radius: 4px;
  }
  
  .module_ranking .moduleTab ul li {
    width: 25%;
    text-align: center;
    color: #ed424b;
    height: 27px;
    line-height: 27px;
    font-size: 14px;
  }
  
  .module_ranking .moduleTab ul li:nth-child(1) {
    background-color: #ed424b;
    color: #fff;
  }
  
  .module_ranking .moduleTab ul li:nth-child(2),
  .module_ranking .moduleTab ul li:nth-child(3) {
    border-right: 1px solid #ed424b;
  }
  
  .module_ranking {
    .list {
      .content {
        .van-swipe {
          .van-swipe-item {
            .item {
              .img {
                em {
                  background-color: #ed424b;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
  
  // 精选专题
  .selected {
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f1f2;
    margin-bottom: 0;
    .img {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 16px;
      img {
        width: 48%;
      }
    }
    .text {
      display: flex;
      justify-content: center;
      margin-top: 38px;
      font-size: 14px;
      p {
        &:nth-child(2) {
          color: #4284ed;
        }
      }
    }
  }
  // 底部
  .footer-link {
    background-color: #fff;
    padding-top: 22px;
    padding-bottom: 64px;
    .top {
      p {
        width: 50%;
        text-align: center;
        font-size: 14px;
        color: #969ba3;
      }
    }
    .among {
      margin-top: 34px;
      p {
        width: 25%;
        text-align: center;
        font-size: 14px;
        color: #969ba3;
      }
    }
    .footer-copy {
      text-align: center;
      font-size: 12px;
      color: #969ba3;
      margin-top: 20px;
    }
  }
  .footer-link .top,
  .footer-link .among {
    display: flex;
  }
  
  // 固定
  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    width: 100%;
    height: 48px;
    box-shadow: 0 0 16px rgb(0 0 0 / 10%);
    justify-content: space-between;
  }
  
  .fixed .bottom-left,
  .fixed .bottom-middle,
  .fixed .bottom-right {
    width: 33%;
    text-align: center;
  }
  
  .fixed .bottom-left {
    line-height: 48px;
    font-size: 15px;
    color: #e5353e;
  }
  
  .fixed .bottom-middle img {
    width: 100%;
  }
  
  .fixed .bottom-right {
    line-height: 48px;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(270deg, #fa646d 0, #fa323e 100%);
  }
  
  .fixed_two {
    position: fixed;
    bottom: 105px;
    right: 15px;
    width: 34px;
    background-color: #ed424b;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    height: 34px;
    padding: 4px;
  }
  
  .van-cell {
    line-height: 18px;
    padding: 0;
  }
  </style>
  